import React from "react"
import './index.scss'
import ContentView from "../../components/ContentView"
import ScrollContent from "../../components/ScrollContent"
import Block from '../../components/Wrapper/Block'
import DetailComponents from '../../components/DetailComponents'
import {productDetail} from '../../http/api'
import {Carousel} from "antd-mobile"
const {BlockTitle,CompanyBlock,RatingItem,BottomFixedBlock} = DetailComponents
export default class SupplyDetail extends React.Component{
        constructor (props) {
                super (props);
                this.state={
                }
        }
        getDataSource=()=>{
                const {id} = this.props.match.params
                productDetail(id).then(res=>{
                        const {productDetailVO,merchantInfoVO,commontDetailVOList,star}=res
                        this.setState({...productDetailVO,merchantInfoVO,ratingsList:commontDetailVOList,collectionStatus:star})
                })
        }
        componentWillMount () {
                this.getDataSource()
        }

        render () {
                const {
                        merchantInfoVO,
                        addressDetail,
                        amount,
                        price,
                        productDesc,
                        productPics,
                        productTitle,
                        supplyTypeDesc,
                        ratingsList,
                        collectionStatus,
                        contactPhone,
                        unit} = this.state
                const pictureArray = productPics?.split(',')||[]
                return <ContentView className='supply-detail' title='产品详情'>
                        <div className='content'>
                                <div className='scroll-top-content'>
                                        <ScrollContent>
                                                <div className="banner-wrapper">
                                                        <Carousel style={{height:100}}>
                                                                {
                                                                        pictureArray.map((item,index)=><div key={index} style={{height:100}}>
                                                                                <img src={item} alt="" style={{width:'100%',height:'auto'}}/>
                                                                        </div>)
                                                                }
                                                        </Carousel>
                                                </div>
                                                <Block >
                                                        <div className="product-title">{productTitle}</div>
                                                        <div className="product-price">
                                                                <div className="tag">供</div>
                                                                <div className="price">
                                                                        <span className="small">￥</span>
                                                                        <span className="count">{price}</span>
                                                                        <span className="small">元/{['','公斤','吨'][unit]}</span>
                                                                </div>
                                                        </div>
                                                        <div className="desc-wrapper">
                                                                <div className="desc-item">
                                                                        <div className="label">数量</div>
                                                                        <div className="text">{amount}{['','公斤','吨'][unit]}</div>
                                                                </div>
                                                                <div className="desc-item">
                                                                        <div className="label">品类</div>
                                                                        <div className="text">{supplyTypeDesc}</div>
                                                                </div>
                                                                <div className="desc-item">
                                                                        <div className="label">所在地</div>
                                                                        <div className="text">{addressDetail}</div>
                                                                </div>
                                                        </div>
                                                </Block>
                                                <Block>
                                                        <BlockTitle text='商品信息'/>
                                                        <div className="product-desc">
                                                                {productDesc}
                                                        </div>
                                                </Block>
                                                <Block>
                                                        <CompanyBlock dataSource={merchantInfoVO||{}} onClick={id=>{
                                                                this.props.history.push(`/home/companyIndex/${id}`)
                                                        }}/>
                                                </Block>
                                                {
                                                        !!ratingsList?.length&&<Block>
                                                                <BlockTitle text='客户评价'/>
                                                                {
                                                                        ratingsList?.map((item,index)=><RatingItem dataSource={item} key={index}/>)
                                                                }
                                                        </Block>
                                                }
                                        </ScrollContent>
                                </div>
                                <div className='bottom-fixed-content'>
                                        <BottomFixedBlock status={collectionStatus} id={this.props.match.params.id} tel={contactPhone}/>
                                </div>
                        </div>
                </ContentView>
        }

}
